<template>
    <div class="container">
        <div class="main-1">
            <div class="swipe">
                <van-swipe :autoplay="3000" indicator-color="white">
                    <van-swipe-item
                        v-for="(item, index) in bannerLiset"
                        :key="index"
                    >
                        <img
                            class="swipe-img"
                            :src="item.image"
                            :alt="item.title"
                        />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="grid">
                <nuxt-link
                    v-for="(item, index) in grid"
                    :key="index"
                    class="grid-item"
                    :to="item.to"
                >
                    <img :src="item.icon" :alt="item.name" />
                    <div>{{ item.name }}</div>
                </nuxt-link>
            </div>
        </div>
        <div class="main-2">
            <div class="title-more">
                <div class="title">最新问答</div>
                <nuxt-link class="more" rel="nofollow" to="/cswd">
                    更多<van-icon
                        name="arrow"
                        class="icon"
                        color="#5096DC"
                        size="0.75rem"
                    />
                </nuxt-link>
            </div>

            <!-- 最新回答 -->
            <div class="cswd-list">
                <nuxt-link
                    v-for="(item, index) in jingxuan_quiz"
                    :key="index"
                    class="cswd-item"
                    :to="`/cswd/${item.id}.html`"
                >
                    <div class="user">
                        <img
                            :src="item.avatar"
                            :alt="item.nickname"
                            class="avatar"
                        />
                        <div class="name">{{ item.nickname }}</div>
                    </div>
                    <div class="message">
                        <img src="~/assets/images/index/wen.png" alt="wen" />
                        <div class="text" style="color: #333333">
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="message">
                        <img src="~/assets/images/index/da.png" alt="da" />
                        <div class="text" style="color: #666666">
                            {{ item.first_answer }}
                        </div>
                    </div>
                    <div class="page_view">{{ item.page_view }}人浏览</div>
                </nuxt-link>
            </div>
            <!-- 最新回答 end -->

            <div class="title-more">
                <div class="title">模板下载</div>
                <nuxt-link class="more" to="/templates/modelarea/10/1/1" rel="nofollow">
                    更多<van-icon
                        name="arrow"
                        class="icon"
                        color="#5096DC"
                        size="0.75rem"
                    />
                </nuxt-link>
            </div>

            <!-- 模板专区 -->
            <div class="moban-list">
                <nuxt-link
                    v-for="(item, index) in drygoodslist"
                    :key="index"
                    class="moban-item"
                    :to="`/templates/${item.id}.html`"
                >
                    <img
                        :src="getType(item.type)"
                        :alt="item.type"
                        class="type-img"
                    />
                    <div class="info">
                        <div class="name">{{ item.title }}</div>
                        <div class="type">
                            {{ item.tid_name }} | {{ item.type }}
                        </div>
                    </div>
                </nuxt-link>
            </div>
            <!-- 模板专区 end -->

            <div class="title-more">
                <div class="title">小竹资讯</div>
                <nuxt-link class="more" to="/information/rmzx/1" rel="nofollow">
                    更多<van-icon
                        name="arrow"
                        class="icon"
                        color="#5096DC"
                        size="0.75rem"
                    />
                </nuxt-link>
            </div>

            <!-- 资讯 -->
            <div class="zixun-list">
                <nuxt-link v-for="(item, index) in imformationlist" :key="index" :to="`/information/${item.id}.html`">
                    <div v-if="index == 0" class="zixun-item-big">
                        <img
                            :src="item.pic"
                            :alt="item.title"
                            class="bg-img"
                            v-lazy="item.pic"
                        />
                        <div class="title">{{ item.title }}</div>
                    </div>
                    <div v-if="index != 0" class="zixun-item">
                        <div class="info">
                            <div class="title">
                                {{ item.title }}
                            </div>
                            <div class="tiem-view">
                                {{ item.push_date }}
                            </div>
                        </div>
                        <img
                            :src="item.pic"
                            :alt="item.title"
                            class="pic"
                            v-lazy="item.pic"
                        />
                    </div>
                </nuxt-link>
            </div>
            <!-- 资讯 end -->
        </div>
    </div>
</template>

<script>
import { goTopSmooth, getTime2, showMessage } from "@/assets/utils/utils.js";
import { getpcindex_new, getanalysedata2 } from "@/assets/api/indexApi";
export default {
    name: "IndexPage",
    async asyncData({ params }) {
        let data = {
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/",
                images: [""],
                title: "小竹财税官网",
                description:
                    "【安徽小竹信息技术有限公司】是一家专业的财税科技型企业，旗下小竹财税官网汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台！",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
            indexRes: null,
            indexData: {},
            bannerLiset: [],
            imformationlist: [],
            jingxuan_quiz: [],
            drygoodslist: [],
            quizNum: null,
        };

        const res = await getpcindex_new({
            course_type: 1,
            drygoods_type: 1,
        });

        if (res.code == 1) {
            data.indexRes = res.data;
            data.indexData = data.indexRes;
            data.bannerLiset = data.indexRes.banner;
            data.imformationlist = data.indexRes.imformationlist;
            data.drygoodslist = data.indexRes.drygoodslist;
            for (let i = 0; i < 3; i++) {
                data.indexRes.jingxuan_quiz[i].first_answer = showMessage(
                    data.indexRes.jingxuan_quiz[i].first_answer
                );
                data.jingxuan_quiz.push(data.indexRes.jingxuan_quiz[i]);
            }
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "会计知识专业问答_财税会计知识问答-小竹财税平台",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    data() {
        return {
            grid: [
                {
                    name: "问题库",
                    icon: require("~/assets/images/index/grid1.png"),
                    to: "/quizdata",
                },
                {
                    name: "税收法规库",
                    icon: require("~/assets/images/index/grid2.png"),
                    to: "/ssfgk/index/0/1",
                },
                {
                    name: "会计法规库",
                    icon: require("~/assets/images/index/grid3.png"),
                    to: "/kjfgk/qykj/0/1",
                },
                {
                    name: "优惠政策",
                    icon: require("~/assets/images/index/grid4.png"),
                    to: "/ssfgk/yhzz/0/1",
                },
                {
                    name: "模板专区",
                    icon: require("~/assets/images/index/grid5.png"),
                    to: "/templates/modelarea/10/1/1",
                },
            ],
            getType: function (type) {
                switch (type) {
                    case "EXCEL":
                        return require("~/assets/images/index/excel.png");
                    case "PDF":
                        return require("~/assets/images/index/pdf.png");
                    case "WORD":
                        return require("~/assets/images/index/word.png");
                    case "PPT":
                        return require("~/assets/images/index/ppt.png");
                    default:
                        return require("~/assets/images/index/zip.png");
                }
            },
        };
    },
    mounted() {
        console.log(this.imformationlist);
        getanalysedata2({
            m_id: 11,
            type: 1,
            code: "PA1",
            describe: "首页",
        });
    },
};
</script>

<style lang="scss" scoped>
.container {
    background-color: #f6f6f6;
}
.main-1,
.main-2 {
    background-color: #ffffff;
    width: 100%;
}
.main-1 {
    padding-top: 0.6rem;
    padding-bottom: 1.62rem;
    margin-bottom: 0.375rem;
}
.swipe {
    width: 92%;
    border-radius: 0.625rem;
    overflow: hidden;
    margin: 0 auto;
    .swipe-img {
        width: 100%;
        height: 10rem;
        object-fit: cover;
        display: block;
    }
}

.grid {
    width: 92%;
    margin: 1.75rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grid-item {
        width: 3.75rem;
        text-align: center;
        display: block;
        img {
            width: auto;
            height: 2rem;
            object-fit: cover;
        }
        div {
            padding-top: 0.15rem;
            font-size: 0.75rem;
        }
    }
}

.title-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    padding-top: 1.1rem;
    .title {
        font-size: 1.18rem;
        color: #333333;
        font-weight: 600;
    }
    .more {
        color: #5096dc;
        font-size: 0.7rem;
    }
}

.cswd-list {
    display: flex;
    max-width: 100vw;
    width: 100vw;
    overflow: auto;
    padding-left: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 0.8rem;
    &::-webkit-scrollbar {
        height: 0; /* 滚动条的宽度 */
    }
}

.cswd-item {
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #eeeeee;
    min-width: 18.68rem;
    width: 18.68rem;
    height: 14rem;
    padding-top: 1.375rem;
    padding-left: 1.125rem;
    padding-right: 1rem;
    margin-right: 1rem;
    .user {
        display: flex;
        align-items: center;
        padding-bottom: 1rem;
        .avatar {
            width: 2.93rem;
            height: 2.93rem;
            object-fit: cover;
            overflow: hidden;
            border-radius: 3rem;
        }
        .name {
            font-size: 0.93rem;
            color: #333333;
            padding-left: 0.9rem;
        }
    }
    .message {
        display: flex;
        padding-top: 0.6rem;
        img {
            width: 1rem;
            height: 1rem;
        }
        .text {
            padding-left: 0.6rem;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 这里设置你希望显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.75rem;
            line-height: 1.5;
        }
    }
    .page_view {
        color: #9e9e9e;
        font-size: 0.75rem;
        text-align: center;
        padding-top: 0.9rem;
    }
}

.moban-list {
    margin-top: 1.43rem;
    .moban-item {
        width: 92%;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        height: 4rem;
        display: flex;
        align-items: center;
        padding-left: 0.875rem;
        margin-bottom: 0.56rem;
        .type-img {
            object-fit: cover;
            width: 2rem;
            height: 2rem;
        }
        .info {
            padding-left: 0.81rem;
        }
        .name {
            font-size: 0.875rem;
        }
        .type {
            font-size: 0.68rem;
        }
    }
}

.zixun-list {
    width: 92%;
    margin: 2.5rem auto;
}

.zixun-item-big {
    position: relative;
    overflow: hidden;
    .bg-img {
        width: 100%;
        height: 10.78rem;
        object-fit: cover;
        display: block;
    }
    .title {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #ffffff;
        font-size: 1rem;
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0 1rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, 0.5);
    }
}

.zixun-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.8rem 0 1.25rem;
    .info {
        margin-right: 1.25rem;
        .title {
            display: -webkit-box; /* Safari */
            -webkit-line-clamp: 2; /* 控制显示的行数 */
            -webkit-box-orient: vertical; /* 垂直排列子项 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 这个属性在这里不会起作用，但它不会造成问题 */
            white-space: normal; /* 正常处理空白符 */
            line-height: 1.5;
            font-weight: 500;
            font-size: 1rem;
            color: #333333;
        }
        .tiem-view {
            font-weight: 350;
            font-size: 0.75rem;
            color: #999999;
        }
    }
    .pic {
        width: 7rem;
        height: 4.59rem;
        object-fit: cover;
        border-radius: 0.62rem;
    }
}
</style>
